Arcgis Vue 点聚合

之前用arcgis加载过天地图,点都是一个一个画出来了,由于点不是很多,所以没有使用点聚合功能,这次需要的点也不太多,总共也就两百个左右,为了好看,说要做个点聚合,做就做,谁怕谁?

资源准备

官方的API里面是没有点聚合的功能的,要借助第三方的来实现,首先得下载资源,官网上有点聚合的例子,点 这里 查看,页面上有个Download as a zip file,点击下载相关资源,下载好之后,解压之后,有个extras目录,
把这个放到API部署的目录,和 esri 目录同级,

正文

注 : 代码中this.mapobj 保存的是arcgis for js 中的构造函数

pointCluster(data) {
            let res = [];
            let wgs = this.map.spatialReference;
            for (let val of data) {
                let pt = new this.mapObj.Point(val.lng, val.lat, wgs);

                // 坐标系转换
                let webMercator = this.mapObj.webMercatorUtils.geographicToWebMercator(pt); 
                let attr = {
                    name: val.name
                };
                res.push({...webMercator, attributes: attr});
            }

            let popupTemplate = new this.mapObj.PopupTemplate({
                'title': '',
                'fieldInfos': [{
                    fieldName: 'name',
                    label: '名称',
                    value: name,
                    visible: true
                }]
            });

            let cluster = new this.mapObj.ClusterLayer({
                'data': res,
                'distance': 50,
                'id': 'clusters',
                'labelColor': '#000',
                'labelOffset': -6,
                'resolution': this.map.extent.getWidth() / this.map.width,
                'singleColor': '#f00',
                'singleTemplate': popupTemplate
            });

            this.cluster = cluster; // 保存到vue组件方便调用

            let defaultSym = new this.mapObj.SimpleMarkerSymbol();
            let renderer = new this.mapObj.ClassBreaksRenderer(defaultSym, 'clusterCount');

            let blue = new this.mapObj.PictureMarkerSymbol(require('../assets/cluster_blue.png'), 32, 32);
            let yellow = new this.mapObj.PictureMarkerSymbol(require('../assets/cluster_yellow.png'), 48, 48);
            let red = new this.mapObj.PictureMarkerSymbol(require('../assets/cluster_red.png'), 64, 64);
            let pink = new this.mapObj.PictureMarkerSymbol(require('../assets/cluster_pink.png'), 80, 80);


            // 根据不同的数值区间,显示不同点的样式
            renderer.addBreak(0, 10, blue);
            renderer.addBreak(10, 20, yellow);
            renderer.addBreak(20, 30, red);
            renderer.addBreak(30, 1000, pink);
            cluster.setRenderer(renderer);
            return cluster;
        }